
<template>
  <div class="nav-box">
    <div class="nav-top">
      <div class="title-name"><span>基础资源</span>共享运营支撑平台</div>
      <el-input
        class="retrieval-input"
        v-model="retrievalValue"
        placeholder="搜索菜单"
        style="width: 252px"
      >
        <i class="el-icon-search el-input__icon" slot="prefix"> </i>
      </el-input>
    </div>
    <div class="nav-tab">
      <div
        v-for="(item, index) in navList"
        :key="item.ids"
        class="nav-li"
        :class="{ 'active-nav': index === activeTabValue }"
        @click="clickTab(index, item)"
      >
        <img class="icon" src="" alt="" />
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <chart-bar
      :data="chartData"
      :x-axis-data="xAxisData"
      :legend-data="legendData"
      :width="'600px'"
      :height="'230px'"
      text="柱状图"
    />
    <div class="admin">
      <img src="@/assets/2.png" class="avatar" alt="" />
      <div class="admin-name">
        <div class="name">admin</div>
        <div class="state">
          <div class="yuan"></div>
          <div class="line-state">在线</div>
          <img src="@/assets/2.png" alt="" />
          <div class="remove">退出</div>
        </div>
      </div>
    </div>
    <div v-if="popoverVisible" class="child-box">
      <div v-for="item in secondaryMenuData" :key="item.ids" class="child-li">
        <img class="icon" src="" alt="" />
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import ChartBar from "@/components/echarts/demo-bar.vue"; //柱状图
export default {
  name: "homeNav",
  components: { ChartBar },
  data() {
    return {
      xAxisData: ["A", "B", "C", "D", "E"],
      legendData: ["实际开票金额（扣除冲销额）", "实际收款金额"],
      chartData: [
        [120, 200, 150, 80, 70],
        [100, 180, 130, 90, 60],
        // {
        //   name: "柱状图1",
        //   color: "#FF6B6B",
        //   data: [820, 932, 901, 934, 1290, 1330, 1320],
        // },
        // {
        //   name: "柱状图2",
        //   color: "#67C23A",
        //   data: [210, 432, 301, 234, 790, 930, 820],
        // },
      ],
      secondaryMenuData: [],
      popoverVisible: false, // 弹窗状态
      activeTabValue: 4, // 菜单栏状态
      retrievalValue: "", // 检索value
      navList: [
        {
          name: "需求督办",
          id: 1,
          icon: "a",
          popoverVisible: false, // 二级菜单状态
          child: [
            { name: "rete", id: 11, icon: "a" },
            { name: "gfhf", id: 12, icon: "a" },
          ],
        },
        {
          name: "资源管理",
          id: 2,
          popoverVisible: false,
          icon: "a",
          child: [
            { name: "cvbcv", id: 21, icon: "a" },
            { name: ",.m,", id: 22, icon: "a" },
          ],
        },
        {
          name: "定价管理",
          id: 3,
          popoverVisible: false,
          icon: "a",
          child: [
            { name: "re", id: 31, icon: "a" },
            { name: "4444", id: 32, icon: "a" },
          ],
        },
        {
          name: "合同管理",
          id: 4,
          popoverVisible: false,
          icon: "a",
          child: [
            { name: "好666机会", id: 41, icon: "a" },
            { name: "55", id: 42, icon: "a" },
          ],
        },
        {
          name: "成本核算",
          id: 5,
          popoverVisible: false,
          icon: "a",
          child: [
            { name: "好机77777会", id: 51, icon: "a" },
            { name: "好777777777机会", id: 52, icon: "a" },
          ],
        },
        {
          name: "对比运营",
          id: 6,
          popoverVisible: false,
          icon: "a",
          child: [
            { name: "好88888机会", id: 61, icon: "a" },
            { name: "好机8888会", id: 62, icon: "a" },
          ],
        },
        {
          name: "综合报表",
          id: 1,
          popoverVisible: false,
          icon: "a",
          child: [
            { name: "好8888888机会", id: 11, icon: "a" },
            { name: "好99999机会", id: 11, icon: "a" },
          ],
        },
        {
          name: "预警策略",
          popoverVisible: false,
          id: 1,
          icon: "a",
          child: [
            { name: "好机99999会", id: 11, icon: "a" },
            { name: "好机会", id: 11, icon: "a" },
          ],
        },
        {
          name: "客户管理",
          popoverVisible: false,
          id: 1,
          icon: "a",
          child: [
            { name: "好机会", id: 11, icon: "a" },
            { name: "好999机会", id: 11, icon: "a" },
          ],
        },
        {
          name: "用印管理",
          id: 1,
          popoverVisible: false,
          icon: "a",
          child: [
            { name: "好机会", id: 11, icon: "a" },
            { name: "好机会", id: 11, icon: "a" },
          ],
        },
        {
          name: "系统管理",
          id: 1,
          icon: "a",
          popoverVisible: false,
          child: [
            { name: "好机会", id: 11, icon: "a" },
            { name: "好机会", id: 11, icon: "a" },
          ],
        },
      ],
    };
  },
  methods: {
    clickTab(index, item) {
      this.activeTabValue = index;
      this.popoverVisible = true;
      this.secondaryMenuData = item.child;
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.nav-box {
  position: relative;
  width: 292px;
  height: 100%;
  background: #fff;
  .title-name {
    padding: 37px 30px 28px 20px;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #4f618d;
    span {
      color: #288f8a;
    }
  }
  .retrieval-input {
    margin-left: 20px;
    /deep/ .el-input__inner {
      height: 34px;
      padding-left: 35px;
      line-height: 34px;
      background: #ecf1f9;
      border-radius: 17px;
      border: none;
    }
    /deep/ .el-input__icon {
      line-height: 34px;
    }
  }
  .nav-tab {
    margin-top: 18px;
    margin-left: 20px;
    .active-nav {
      background: #00998b;
      border-radius: 10px;
      .name {
        color: #fff;
      }
    }
    .nav-li {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 11px 18px;
      .name {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
      }
      .icon {
        width: 18px;
        margin-right: 40px;
      }
    }
  }
  .admin {
    position: absolute;
    bottom: 61px;
    display: flex;
    align-items: center;
    left: 43px;
    padding-left: 19px;
    width: 190px;
    height: 90px;
    background: linear-gradient(0deg, #f7fdfc 0%, #cef1ee 100%);
    border-radius: 10px;
    .avatar {
      width: 40px;
      height: 40px;
      margin-right: 18px;
    }
    .name {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      margin-bottom: 9px;
    }
    .yuan {
      width: 14px;
      height: 14px;
      background: #baf2e7;
      border-radius: 50%;
      margin-right: 5px;
    }
    .line-state {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 12px;
      color: #333333;
      margin-right: 14px;
    }
    .remove {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 12px;
      color: #abb4c5;
      margin-left: 5px;
    }
    .state {
      display: flex;
      align-items: center;
      img {
        width: 15px;
        height: 18px;
      }
    }
  }
  .child-box {
    width: 1626px;
    height: 1080px;
    background: rgb(240, 252, 237);
    position: fixed;
    top: 0px;
    left: 293px;
    z-index: 2023;
    display: flex;
    .child-li {
      width: 200px;
      height: 90px;
      display: flex;
      margin-left: 40px;
      align-items: center;
      background: #fff;
      img {
        width: 18px;
        margin-right: 10px;
      }
    }
  }
}
</style>
